<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <nav>
            <!-- #:在地址栏有两个含义
            - 锚点链接：在页面内部进行导航，不会有页面跳转。
            - hash。在前端路由技术中，我们叫它哈希值。它不会有页面跳转，地址栏变化的
                    浏览器中后退，前进也是可用的
               http://127.0.0.1:5500/index.html#/add -->

            <a href="#/">主页</a>
            <a href="#/add">添加</a>
        </nav>

        <div id="content">
            <!-- // 模拟不同的地址栏中的hash值，显示不同的内容 -->
        </div>
    </div>
    <script>

        // 实现前端路由效果
        //    -  地址栏变化，页面内容变化，不刷新

        // 1. 如何监听地址栏中hash值的变化？
        //    答：在window上，添加hashchange监听
        // 2. 如何获取当前地址栏中的hash值？
        //    答：location.hash
        window.addEventListener('hashchange', onHashChange)

        // 当页面中的dom加载完成，就去执行
        window.addEventListener('DOMContentLoaded',function() {
            onHashChange()
        })

        function onHashChange (e) {
            console.log('hash值的变了')
            console.log(e)
            // 根据不同的hash值，显示不同的内容到content区域
            switch (location.hash) {
                case "#/": 
                    // 主页
                    document.getElementById('content').innerHTML = "这里主页的内容"
                    break;
                case "#/add": 
                    // add
                    document.getElementById('content').innerHTML = "这里是add的内容"
                    break;
                default:
                    document.getElementById('content').innerHTML = "404没有这个页面"

                    break;
            }

            // if elseif ,elseif ......
        }

    </script>
</body>
</html>